<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="招标标题">
          <el-input v-model="searchForm.zbbt" placeholder="请输入招标标题" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据表格 -->
      <el-table :data="dataList" v-loading="loading" border style="width: 100%;">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="招标编号" prop="id" show-overflow-tooltip align="center" min-width="200" />
        <el-table-column label="招标标题" prop="zbbt" show-overflow-tooltip align="center" min-width="200" />
        <el-table-column label="金额" prop="sfje" show-overflow-tooltip align="center" min-width="100" />
        <el-table-column label="状态" show-overflow-tooltip align="center" prop="status">
          <template #default="scope">
            <span v-if="scope.row.status === 0">竞价中</span>
            <span v-else-if="scope.row.status === 1">定标</span>
            <span v-else-if="scope.row.status === 2">落选</span>
          </template>
        </el-table-column>
        <el-table-column label="投标日期" prop="createTime" show-overflow-tooltip align="center" min-width="150" />
        <el-table-column label="招标文件" prop="tbwj" show-overflow-tooltip align="center" min-width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.tbwj" type="text" @click="handlePreviewFiles(scope.row.tbwj.split(','))">
              预览文件
            </el-button>
            <span v-else>暂无文件</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="openToubiaoDialog(scope.row)">投标</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :page-size.sync="pagination.pageSize" :current-page.sync="pagination.pageNum" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 文件预览对话框 -->
    <el-dialog title="文件预览" :visible.sync="previewDialogVisible" width="60%">
      <el-carousel v-if="previewFiles.length > 0" height="600px">
        <el-carousel-item v-for="(file, index) in previewFiles" :key="index">
          <!-- 判断是否为图片 -->
          <el-image v-if="isImage(file)" :src="file" style="width: 100%; height: 100%; object-fit: contain;" />
          <!-- 判断是否为 PDF -->
          <div v-else-if="isPdf(file)" style="text-align: center; padding: 20px;">
            <iframe :src="file" style="width: 100%; height:600px; border: none;"></iframe>
          </div>
          <!-- 其他文件类型 -->
          <div v-else style="text-align: center; padding: 20px;">
            <a :href="file" target="_blank">查看</a>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div v-else>暂无文件可预览</div>
    </el-dialog>

    <!-- 投标对话框 -->
    <el-dialog title="投标" :visible.sync="toubiaoDialogVisible" width="40%">
      <el-form :model="toubiaoForm" ref="toubiaoFormRef" label-width="100px">
        <el-form-item label="投标金额" prop="sfje">
          <el-input v-model="toubiaoForm.sfje" placeholder="请输入投标金额" />
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload :action="uploadUrl" :file-list="toubiaoForm.fileList" :on-success="handleUploadSuccess"
            :on-remove="handleUploadRemove" list-type="text">
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">支持单个或多个文件上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toubiaoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitToubiao">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser } from "@/api/tblog"; // 假设你有一个 API 文件来处理数据请求
export default {
  data() {
    return {
      uploadUrl: `${import.meta.env.VITE_APP_BASE_API}/file/upload?source=album-cover`,
      loading: false,
      dataList: [],
      total: 0, // 总条数
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
      },
      searchForm: {
        zbbt: '', // 招标标题
      },
      previewDialogVisible: false,
      previewFiles: [],
      toubiaoDialogVisible: false,
      toubiaoForm: {
        id: '',
        zbbt: '',
        sfje: '',
        tbwj: '',
        fileList: [],
      },
    };
  },
  methods: {
    // 获取招标数据列表
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pagination;
      const params = {
        pageNum,
        pageSize,
        zbbt: this.searchForm.zbbt == '' ? null : this.searchForm.zbbt, // 查询条件
      };
      listUser(params) // 传递分页和查询参数
        .then((response) => {
          this.dataList = response.data.records; // 假设接口返回分页数据
          this.total = response.data.total; // 总条数
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
          this.loading = false;
        });
    },
    // 预览文件
    handlePreviewFiles(fileUrls) {
      if (!fileUrls || fileUrls.length === 0) {
        this.$message.warning("暂无文件可预览");
        return;
      }
      this.previewFiles = fileUrls;
      this.previewDialogVisible = true;
    },
    // 判断是否为图片
    isImage(fileUrl) {
      return /\.(png|jpe?g|gif|bmp|webp)$/i.test(fileUrl);
    },
    // 判断是否为 PDF
    isPdf(fileUrl) {
      return /\.pdf$/i.test(fileUrl);
    },
    // 打开投标弹窗
    openToubiaoDialog(row) {
      this.toubiaoForm.zbbt = row.zbbt;
      this.toubiaoForm.id = row.id;
      this.toubiaoForm.sfje = '';
      this.toubiaoForm.fileList = [];
      this.toubiaoDialogVisible = true;
    },
    // 上传文件成功
    handleUploadSuccess(response, file, fileList) {
      this.toubiaoForm.fileList = fileList.map((item) => item.response?.data || item.url);
      this.$message.success("文件上传成功");
      this.toubiaoForm.tbwj = this.toubiaoForm.fileList.join(",");
    },
    // 移除文件
    handleUploadRemove(file, fileList) {
      this.toubiaoForm.fileList = fileList.map((item) => item.response?.data || item.url);
      this.$message.info("文件已移除");
    },
    // 提交投标
    submitToubiao() {
      if (!this.toubiaoForm.sfje || this.toubiaoForm.fileList.length === 0) {
        this.$message.error("请填写完整的投标信息");
        return;
      }
      const payload = {
        id: this.toubiaoForm.id,
        tbwj: this.toubiaoForm.tbwj,
        zbbt: this.toubiaoForm.zbbt,
        sfje: this.toubiaoForm.sfje,
        files: this.toubiaoForm.fileList.join(","),
      };
      sysTbadd(payload)
        .then((response) => {
          if (response.code === 200) {
            this.$message.success("投标成功！");
            this.toubiaoDialogVisible = false;
            this.getList(); // 刷新列表
          } else {
            this.$message.error("投标失败，请重试！");
          }
        })
        .catch((error) => {
          console.error("投标失败:", error);
          this.$message.error("投标失败，请重试！");
        });
    },
    // 查询
    handleSearch() {
      this.pagination.pageNum = 1; // 查询时重置页码
      this.getList();
    },
    // 重置
    handleReset() {
      this.searchForm.zbbt = ''; // 清空查询条件
      this.pagination.pageNum = 1; // 重置页码
      this.getList();
    },
    // 分页大小改变
    handleSizeChange(newSize) {
      this.pagination.pageSize = newSize;
      this.getList();
    },
    // 当前页码改变
    handleCurrentChange(newPage) {
      this.pagination.pageNum = newPage;
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
